<template>
  <div class="filter-params">
    <FilterInput
      ref="FilterToolRef"
      v-model="paramsObj"
      :filter-list="filterList"
      :show-mobile-icon="isMobile"
      show-search-btn
      @handelClick="queryClick"
      @queryEmpty="queryEmpty" />
  </div>
</template>

<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: true
    },
    isMobile: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      paramsObj: { }
    };
  },
  computed: {
    filterList() {
      const arr = [
        { keyword: 'clientName', name: '客户名称', labelWidth: '70px', type: 'input' },
        { keyword: 'resourceName', name: '账号', labelWidth: '70px', type: 'input' },
        { keyword: 'orderId', name: '订单编号', labelWidth: '70px', type: 'input' },
        { keyword: 'orderPlatform', name: '下单平台', labelWidth: '70px', type: 'input' },
        { keyword: 'theme', name: '品牌名称', labelWidth: '70px', type: 'input' },
        { keyword: 'contactPerson', name: '联系人', labelWidth: '70px', type: 'input' },
        { keyword: 'taxAmount', name: '含税金额', labelWidth: '70px', type: 'inputRange' },
        { keyword: 'orderTime', labelWidth: '70px', name: '下单日期', timeType: 'daterange', type: 'rangeDate' }
      ];
      return arr;
    }
  },
  watch: {
    dialogVisible(val) { // 关闭开启弹窗时清空数据
      this.paramsObj = {};
    }
  },
  methods: {
    queryClick() {
      this.$emit('searchData', true);
    },
    queryEmpty() {
      this.paramsObj = {};
      this.queryClick();
    }
  }
};
</script>

<style lang="scss" scoped>
.filter-params {
  display: flex;
  flex-wrap: wrap;
  .input-with-select {
    width: 240px;
    margin-bottom: 10px;
    margin-right: 10px;
    &::v-deep {
      .el-input-group__prepend {
        background-color: #fff;
      }
      .el-select {
        .el-input__inner {
          font-size: 14px;
          width: 110px;
          color: #666666;
        }
      }
      &>.el-input__inner {
        font-size: 14px;
        width: 130px;
        background-color: #FAFAFC;
      }
    }
  }
  .select {
    margin-right:10px;
    width: 110px;
    margin-bottom: 10px;
    &::v-deep {
      .el-input__inner {
        font-size: 14px;
      }
      .el-select__tags {
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
      }
    }
  }
  .time-type-select {
    margin-right:10px;
    margin-bottom: 10px;
    & ::v-deep {
      .el-form-item__content {
        display: flex;
        align-items: center;
      }
      .el-select {
        width: 100px;
        .el-input__inner {
          width: 105px !important;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          border-right: none;
          border-color: #DCDFE6 !important;
        }
      }
      .el-date-editor {
        width: 240px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-color: #DCDFE6 !important;
        .el-range-separator {
          width: 20px;
        }
      }
    }
  }
}
.query-button {
  display: flex;
  align-items: center;
  margin-left: 10px;
  .clear-btn-style {
    font-size: 14px;
    color: #333333;
    margin-left: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .clear-icon {
      width: 10px;
      height: 10px;
      margin-left: 2px;
    }
  }
}
.small {
  & ::v-deep {
    .select {
      width: 100px;
      .el-input {
        width: 100px;
      }
      .el-input__inner {
        width: 100px;
        font-size: 13px;
      }
    }
  }
  .time-type-select {
    &::v-deep {
      .el-select {
        width: 96px;
        .el-input__inner {
          width: 101px !important;
        }
      }
      .el-date-editor {
        width: 220px;
      }
    }
  }
  .input-with-select {
    width: 220px;
    &::v-deep {
      .el-select {
        .el-input__inner {
          font-size: 13px;
          width: 100px;
        }
      }
      &>.el-input__inner {
        width: 120px;
      }
    }
  }
}
.select-item-wrap {
  display: flex;
  align-items: center;
  span {
    width: 92px;
    color: #606266;
  }
}
</style>
